<template>
  <div class="wrap">
    <div class="detail-bg">
      <img src="@/assets/images/Entrepreneur@2x.png" alt />
      <div>
        <h2>{{levelDetail.name}}</h2>
        <p>{{levelDetail.remark}}</p>
      </div>
    </div>
    <van-skeleton title avatar :row="3" :loading="loading">
      <div class="content">
        <em>
          <img src="@/assets/images/Strategy@2x.png" alt width="18" />
        </em>
        <span>升级攻略</span>
        <p>{{levelDetail.detail}}</p>
      </div>
    </van-skeleton>
    <div class="btn-fix">
      <van-button type="primary" size="large" @click="upgradeBtn">立即升级</van-button>
    </div>
  </div>
</template>
<script>
import { levelsView, upgrade } from "@/api/products.js";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      loading: false,
      levelDetail: {},
      levelId: ""
    };
  },
  computed: {
    ...mapGetters(["userId"])
  },
  methods: {
    upgradeBtn() {
      let params = {
        user_id: this.userId,
        target_level_id: this.levelId
      };
      upgrade(params).then(res => {
        // eslint-disable-next-line
        console.log(res);
        Toast({
          message: "申请成功，待确认!",
          overlay: true,
          loadingType: "spinner",
          onClose: () => {}
        });
      });
    }
  },
  mounted() {
    let level_id = this.$route.query.id;
    this.levelId = level_id;
    levelsView({
      id: level_id
    }).then(res => {
      this.levelDetail = res;
    });
  }
};
</script>
<style lang="less" scoped>
.wrap {
  min-height: 100vh;
  background: white;
}
.detail-bg {
  position: relative;
  color: white;
  img {
    width: 100%;
  }
  div {
    position: absolute;
    left: 0%;
    top: 45%;
    transform: translateY(-50%);
    z-index: 2;
    color: white;
    margin-left: 10%;
    h2 {
      margin: 0;
    }
    p {
      margin-top: 10px;
      font-size: 12px;
    }
  }
}
@pd: 20px;
.content {
  position: relative;
  padding: 0 @pd;
  em {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
  p {
    margin-top: 10px;
    color: #999999;
    font-size: 13px;
    line-height: 1.5em;
  }
}
.btn-fix {
  left: @pd;
  right: @pd;
}
</style>